<template>
  <div class="ssxg-wrap">
    <dx-Wrap :name="'干预实时效果'">
      <template v-slot:content>
<!--        <common-Form-->
<!--              :fieldsList="dialogfieldsList"-->
<!--              :tableHead="dialogTableHead"-->
<!--              :hidePagination="true"-->
<!--              :class="'ssxg-sample-dialog'"-->
<!--              ref="tableForm"-->
<!--              :tableHeight="180"-->
<!--        >-->
<!--        </common-Form>-->
        <div class="bottom-table-head">
          <div class="dd"
               v-for="a in dialogTableHead"
               :key="a.prop"
               :style="{width: `${a.width}`}"
          >
            {{a.label}}
          </div>
        </div>
        <vue-seamless-scroll :data="tableData" class="seamless-warp"
                             :class-option="defaultOption"
        >
          <div class="bottom-table-wrap">
            <div class="bottom-table-item"
                 v-for="(v, index) in tableData"
                 :key="index"
            >
              <div class="dd" style="width: 35%">{{v['domainName']}}</div>
              <div class="dd" style="width: 25%">{{v['domainLocation']}}</div>
              <div class="dd" style="width: 20%">{{v['fraudType']}}</div>
              <div class="dd" style="width: 20%">{{v['fraudDataLocation']}}</div>


            </div>
          </div>
        </vue-seamless-scroll>

      </template>
    </dx-Wrap>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import tsCol from '@/components/left/tsCol'
    import dxWrap from '@/components/customComponents/dxWrap.component'
    import api from "@/api/common.api";
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        components: {
            // commonDialog,
            // commonForm,
            // commonWrap,
            dxWrap,
            vueSeamlessScroll
        },
        data () {
            return {
                tableData: [],
                defaultOption: {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                },
                dialogfieldsList: [
                    // {
                    //     type: 'dict',
                    //     code: 'alarmFklx',
                    //     name: '反馈类型',
                    //     placeholder: '请选择',
                    //     options: [
                    //         {
                    //             code: '1',
                    //             name: '🍉'
                    //         },
                    //     ]
                    // },
                ],
                dialogTableHead: [
                    {
                        prop: 'domainName',
                        label: '干预域名',
                        width: '35%'
                    },
                    {
                        prop: 'domainLocation',
                        label: '域名归属',
                        width: '25%'
                    },
                    {
                        prop: 'fraudType',
                        label: '欺诈类型',
                        width: '20%'
                    },
                    {
                        prop: 'fraudDataLocation',
                        label: '数据来源',
                        width: '20%'
                    },
                ],

            }
        },
        methods: {
            realTimeEffectStatic () {
                api.realTimeEffectStatic().then(res=>{
                    // this.$refs.tableForm.getTableData({},res)
                    this.tableData = res
                })
            },
        },
        mounted() {
          this.realTimeEffectStatic()
        }
    }
</script>
<style lang="stylus">
  .ssxg-wrap {
    height: 100%;
    position: relative;
    .seamless-warp{
      padding-top: 40px;
      height: calc(100% - 40px);
      overflow: hidden;
    }
    .bottom-table-head{
      width: 100%;
      padding: 10px 0;
      display: flex;
      background: #0d364d;
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 9;
    }
    .bottom-table-wrap{
      height: 100%;
      .bottom-table-item{
        padding: 10px 0;
        display: flex;
      }
      .bottom-table-item:nth-child(even){
        background: #144066;
      }
    }
    .dd{
      text-align: center;
      color: #b6c3c9 !important;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .common-form-item{
      display: none;
    }
  }
</style>
